<template>
  <div class="info-wrap">
    <Title title="上刊价格" style="font-size:16px; margin:32px 0 8px 0"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col v-for="item in fields" :span="8" :key="item.key" :class="{'label-collapse-global': item.labelCollapse}">
          <el-form-item :label="`${item.label}：`" style="margin-bottom: 16px;">
            <ToolTip :content="getData(item)"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { numberTextFormat } from '@/filters/number';
import { getFields } from '../components/data';

export default {
  components: {
    Title
  },
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fields: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    'detailInfo': {
      handler(val) {
        if (val.accountInfo && val.accountInfo.platformCategory) {
          this.fields = getFields(val.accountInfo.platformCategory).find(it => it.key === 'journalInfo').children;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    numberTextFormat,
    getData(field) {
      const data = this.detailInfo.journalInfo[field.key];
      if (field.type === 'cost') {
        if (!data.value) return '--';
        return data.costType ? `利润分成｜${data.value.toFixed(2)}%` : `固定价格｜${this.numberTextFormat(data.value, 2)}`;
      }
      return data ? this.numberTextFormat(data, 2) : '--';
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
